<!-- ****设置地图显示范围**** -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../src/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../src/css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../libs/leaflet/leaflet.css" />
		<script src="../../libs/leaflet/leaflet.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../libs/leaflet/leaflet.ChineseTmsProviders.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="map"></div>
		<div>
			<div>
				<span>东:</span>
				<input type="text" id="east" />
			</div>
			<div>
				<span>南:</span>
				<input type="text" id="south" />
			</div>
			<div>
				<span>西:</span>
				<input type="text" id="west" />
			</div>
			<div>
				<span>北:</span>
				<input type="text" id="north" />
			</div>
			<button type="button" onclick="setMaxBounds()">设置显示范围</button>
			<div>
				<div>设置拖动边界有2种方式，一种是在初始化地图的时候限制，一种是使用setMaxBounds方法</div>
			</div>
		</div>
		<script type="text/javascript"  id="my_script">
			let map = L.map('map', {
				maxBounds: new L.LatLngBounds([32.34152158000006, 119.33751466100011], [32.491510178000055, 119.65031893500009]),
				center: [32.36, 119.45], // leaflet 所有坐标都是纬度在前,经度在后的
				zoom: 13
			})

			// 地图依赖于leaflet.ChineseTmsProviders.js  他提供4326坐标系的天地图,高德地图等
			let baseLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
				maxZoom: 18,
				minZoom: 10
			})
			map.addLayer(baseLayer)
			let labelLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
				maxZoom: 18,
				minZoom: 10
			})
			map.addLayer(labelLayer)

			function setMaxBounds() {
				let north = document.getElementById("north").value || 39;
				let south = document.getElementById("south").value || 30;
				let east = document.getElementById("east").value || 120;
				let west = document.getElementById("west").value || 110;
				map.setMaxBounds([
					[north, east],
					[south, west]
				]);
			}
		</script>
	</body>
</html>
